<template>
  <div id="app">
    <div class="container">
      <h2>智能导览机器人</h2>
      <ChatWindow :messages="messages"/>
      <InputArea @send="handleSend"/>
    </div>
  </div>
</template>

<script>
import ChatWindow from './components/ChatWindow.vue'
import InputArea from './components/InputArea.vue'
import { queryQwenVL } from './api/llm'

export default {
  name: 'App',
  components: { ChatWindow, InputArea },
  data() {
    return { messages: [] }
  },
  methods: {
    // 将图片转换为Base64格式
    convertImageToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = (e) => resolve(e.target.result)
        reader.onerror = (error) => reject(error)
        reader.readAsDataURL(file)
      })
    },
    
    async handleSend({ text, image }) {
      if (text || image) {
        let base64Image
        if (image) {
          // 先将图片转换为Base64格式
          base64Image = await this.convertImageToBase64(image)
        }
        
        // 添加用户消息
        if (image) {
          this.messages.push({
            sender: 'user',
            text: text || '[图片上传]',
            image: base64Image // 存储Base64格式的图片
          })
        } else {
          this.messages.push({ sender: 'user', text })
        }
        
        // 添加'正在思考'的临时消息
        const thinkingIndex = this.messages.length
        this.messages.push({
          sender: 'bot',
          text: '正在思考...',
          isThinking: true
        })
        
        try {
          let result
          if (image) {
            // 处理图片和文本
            const question = text || '请描述这张图片'
            result = await queryQwenVL(base64Image, question)
          } else {
            // 只处理文本
            // 使用一个有效的示例图片URL
            const exampleImageUrl = 'https://dashscope.oss-cn-beijing.aliyuncs.com/images/dog_and_girl.jpeg'
            result = await queryQwenVL(exampleImageUrl, text)
          }
          
          // 解析结果并替换临时消息
          if (result.choices && result.choices.length > 0) {
            this.messages.splice(thinkingIndex, 1, {
              sender: 'bot',
              text: result.choices[0].message.content
            })
          } else {
            throw new Error('未获取到有效回复')
          }
        } catch (error) {
          console.error('调用LLM服务失败:', error)
          // 替换正在思考的临时消息为错误消息
          this.messages.splice(thinkingIndex, 1, {
            sender: 'bot',
            text: `抱歉，处理请求时出错: ${error.message}`
          })
        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background: #f5f6fa;
  min-height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
}
.container {
  width: 100%;
  max-width: 800px;
}
h2 {
  text-align: center;
  color: #2d8cf0;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}
</style>